<template>
<!--  horizontal: boolean // 是否水平分割-->
<!--  ratio: string //初始比例，"1/1", 2/1""-->
  <div style="margin: 20px; height: 100%">
    <Split class="page" ratio="2/1">
      <template #one>
        <div class="left">
          <span>代办事项</span>
          <ToDoList></ToDoList>
        </div>
      </template>

      <template #two>
        <Split class="right" horizontal>
          <template #one>
            <div class="up">
              <span>提醒信息</span>
            </div>
          </template>
          <template #two>
            <div class="down">
              <span>通知公告</span>
            </div>
          </template>
        </Split>
      </template>
    </Split>
  </div>

</template>

<script lang="ts" setup>
import Split from '@/components/Split.vue';
import ToDoList from "@/components/flow/ToDoList.vue";
</script>

<style lang="scss" scoped>
page {
  width: 100vw;
  height: 100vh;

  .left {
    height: 100%;
    background-color: pink;
  }

  .right {
    height: 100%;

    .up {
      height: 100%;
      background-color: aqua;
    }

    .down {
      min-height: 100%;
      background-color: skyblue;
    }
  }
}
</style>